<template>  
  <view class="container">  
    <!-- <view class="header">  
      <text class="header-title">药店药品比价</text>  
    </view> -->

	<u-loading-page :loading="loading"></u-loading-page>
	<u-alert type="warning" title="请输入药品名称再排序" :show-icon="false" :center="true" v-if="isShowTip"></u-alert>	
	<view class="search-bar">
		<u-search height="75rpx" :clearabled="true" :inputStyle="inputStyle" :actionStyle="actionStyle" bgColor="white" :showAction="true" :animation="false" actionText="搜索" placeholder="请输入药品名称" v-model="searchQuery.name" @custom="search"></u-search>
    </view> 
	
	<view class="picker-group">  
	      <view class="picker-wrapper">  
		    <!-- <u-picker :show="show" :columns="columns"></u-picker>
		  	<u-button @click="show = true">打开</u-button> -->
	        <u-picker :show="showPricePicker" :columns="priceColumns" @confirm="handlePriceSort" @cancel="handleCancelPrice"></u-picker>  
	        <u-button  class="picker-button" @click="showPricePicker = true">{{paixu}}</u-button>  
	      </view>  
	      <view class="picker-wrapper">  
	        <u-picker :show="showAreaPicker" :columns="areaColumns" @confirm="handleAreaSort" @cancel="handleCancelArea"></u-picker>  
	        <u-button class="picker-button" @click="showAreaPicker = true">{{areaPaixu}}</u-button>  
	      </view>  
	</view>  
	  
	<view v-for="(drug, index) in drugs" :key="index" class="drug-item" @click="goToDrugDetails(drug.drugstore_medicine_id,drug.medicine_name,drug.org_name,drug.street_addr,drug.price,drug.distance)">  
	     <view class="drug-info">  
	       <view class="name-price">  
	         <text class="name">{{ drug.medicine_name }}</text>  
	         <text class="price">￥{{ drug.price }}</text>  
	       </view>  
	       <view class="store-name">{{ drug.org_name }}</view>  
	       <view class="product-name">商品名：{{ drug.common_name }}</view>  
	       <view class="specification">规格：{{ drug.specification }}</view>  
	       <view class="phone">咨询电话：{{ drug.contact_phone }}</view>  
		   <view class="phone">地址：{{ drug.street_addr }}</view>
		   <br>
 <view class="divider" style="height: 1px; background-color: #d8dadc; margin: 5px 0;"></view>
	       <view class="sort-and-city-container">
			<text  class="distance">{{ drug.distance }}公里</text>
			<a class="callPhone" href="tel:4000-000-000">拨打电话</a>
	      </view>
	     </view> 
	</view> 
	<u-loadmore 
	        :status="status" 
	        loadmoreText="上拉或点击加载更多"
			loadingText="加载中"
			nomoreText="没有数据了"
			:is-dot=true
			:icon=true
	/>
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {
	  inputStyle:{
		fontSize:'35rpx'
	  },
	  actionStyle:{
		fontSize:'35rpx',
	  },
	  showPricePicker:false,
	  showAreaPicker:false,
	  priceColumns: [['默认排序','低价优先','高价优先']],
	  areaColumns: [['全市','城区','泽州县','高平市','阳城县','陵川县','沁水县']],
	  status:'loadmore',
	  searchQuery: {
		  name:'',
	  }, // 用来保存搜索查询的变量  	
      drugs: [  
        
        // ...更多卡片数据  
      ],
	  sort:'默认排序',
	  area:"全市",
	  currentPage:1,
	  pageSize:10,
	  paixu:'价格排序',
	  areaPaixu:'全市',
	  loading:false,
	  isShowTip:false,
	  lng:112.86,//经度
	  lat:35.49//
	  
    }  
  },
    mounted() {
    	this.search()
    },
    onReachBottom() {
        this.status = 'loading';
        this.currentPage = ++ this.currentPage;
        this.loadMore()
	},
	methods: {
		callPhone() {  
			alert("dddd")
		      // 注意：在Web平台上，这只会打开拨号界面，用户需要手动点击拨打  
		      uni.navigateTo({  
		        url: 'tel:123456789' // 替换为实际要拨打的电话号码  
		      });  
		    }  ,
		
		handleCancelPrice(){this.showPricePicker = false},
		handleCancelArea(){this.showAreaPicker = false},
		handleAreaSort(value){
			this.areaPaixu=value.value[0]
			this.area = value.value[0]
			this.showAreaPicker=false
			this.search()
		},
		handlePriceSort(value){
			if(!this.searchQuery.name){
				this.isShowTip =true
				this.showPricePicker=false
				return;
			}
			this.paixu=value.value[0]
			this.sort = value.value[0]
			this.showPricePicker=false
			this.search()
		},
		
		getCurrentZb(){
			const that = this;
			uni.getLocation({  
			    type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 uni.openLocation 的国测局经纬度  
			    success: function (res) {  
					debugger
			        console.log('获取位置成功', res);  
			        // res.longitude 经度，res.latitude 纬度  
			        that.lng = res.longitude;  
			        that.lat = res.latitude;  
			    },  
			    fail: function (err) {  
			        // fail 调用失败的回调函数  
			        console.error('获取位置失败', err);  
			        if (err.code === 1) {  
			            console.log('用户拒绝授权获取地理位置');  
			        }  
			    }  
			});
		},
		loadMore() {
		  this.searchQuery.sort=this.sort;
		  this.searchQuery.area = this.area;
		  this.searchQuery.currentPage = this.currentPage;
		  this.searchQuery.pageSize = this.pageSize;
		  this.searchQuery.lng = this.lng;
		  this.searchQuery.lat = this.lat;
		  // 发送请求到服务器获取更多数据
		  // 假设你有一个方法 fetchDrugs(page, pageSize) 来获取数据
		  let url = '/ypbj/ybjGetStockWarnAllList';
		  let queryParams = new URLSearchParams(this.searchQuery).toString();  
		  console.log(queryParams)
		  if (queryParams) {
			  url += '?' + queryParams; 
			   console.log("url:"+url)
		  }  
		  this.$http.get(url).then(res=>{
		    if(res.data.code ==200){
				this.drugs = this.drugs.concat(res.data.data)
				if(res.data.total=0){
					this.status='nomore'
				}else{
					this.status='loadmore'
				}
			}
		    
		  })  
		},
		
		openAMap(a,b,c) {
		  const url = 'http://uri.amap.com/navigation?to='+a+','+b+','+c+'&mode=car&src=nyx_super;';
		  window.open(encodeURI(url),'_black');
		},
		search(){
			this.searchQuery.sort=this.sort;
			this.searchQuery.area = this.area;
			this.searchQuery.currentPage = this.currentPage;
			this.searchQuery.pageSize = this.pageSize;
			this.searchQuery.lng = this.lng;
			this.searchQuery.lat = this.lat;
			this.getData(this.searchQuery);
		},
		getData(params) {
			this.loading = true
			// 在这里处理搜索逻辑，比如发送请求到后端获取数据  
		    let url = '/ypbj/ybjGetStockWarnAllList';
			let queryParams = new URLSearchParams(params).toString();  
			    // 如果 queryParams 不为空，则将其添加到 URL  
			    if (queryParams) {  
			        url += '?' + queryParams;  
			    }  
		    this.$http.get(url).then(res=>{
		    	console.log("res::",res)
		      this.drugs = res.data.data
			  this.loading = false
		    })  
		},
		goToDrugDetails(x,n,o,s,p,d) {
			console.log("x,n,o,s,p",x,n,o,s,p)
			uni.navigateTo({
			  url: '/pages/common/exit?x='+x+'&n='+n+'&o='+o+'&s='+s+'&p='+p+'&d='+d, // 注意这里不需要在 URL 后面拼接参数  
			});
		}, 
		 
	},
}  
</script>  
  
<style>
.u-slot-title{
  background-color: #fff;	
	
}

.container {
  /* background-color: #fff; */
  display: flex;  
  flex-direction: column; /* 垂直布局 */  
  padding: 20rpx;
  background-color: #f5f7fa;
}  
  
.header {  
  display: flex;  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中（如果header高度固定）*/  
  height: 60rpx; /* 设置header的高度 */  
  padding: 10rpx;  
  background-color: #00aaff; /* 背景色 */  
  border-bottom: 1rpx solid #ccc; /* 下边框 */  
}  
  
.header-title {  
  font-size: 20rpx;  
  font-weight: bold;
  color: white;
}  
  
.card-list {  
  /* 默认就是块级元素，垂直堆叠 */  
}  
  
.card-item {  
  margin-bottom: 20rpx; /* 卡片之间的垂直间距 */  
  background-color: #fff;  
  border-radius: 10rpx;  
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);  
  overflow: hidden; /* 隐藏溢出内容 */  
}  
  
.card-content {  
  padding: 15rpx;  
}  
  
.card-title {  
  font-size: 18rpx;  
  font-weight: bold;  
  margin-bottom: 10rpx;  
}  
  
.card-description {  
  font-size: 14rpx;  
  color: #888;  
}
/* 保留之前的样式，并添加新的样式 */  
.container {  
  display: flex;  
  flex-direction: column;  
  padding: 20rpx;  
}  
  
.header {  
  /* ...你的header样式 */  
}  
  
.search-bar {  
  display: flex;  
  align-items: center; /* 垂直居中 */  
  margin-top: 10rpx; /* 与header之间的间距 */  
  margin-bottom: 10rpx;
}  
  
.search-input {  
  flex: 1; /* 占据剩余空间 */  
  height: 50rpx; /* 输入框高度 */  
  padding: 0 15rpx; /* 内边距 */  
  border-radius: 10rpx; /* 边框圆角 */  
  border: 1rpx solid #ccc; /* 边框 */
  font-size: 30rpx;
  
}  
  
.search-button {  
  height: 45rpx; /* 按钮高度，与输入框保持一致 */  
  line-height: 45rpx; /* 垂直居中按钮文本 */  
  border-radius: 10rpx; /* 边框圆角 */  
  background-color: #00aaff; /* 背景色 */  
  color: #fff; /* 文本颜色 */  
  border: none; /* 无边框 */  
  margin-left: 10rpx; /* 与输入框之间的间距 */  
  font-size: 30rpx;
  text-align: center;
}  
.drug-item {
  margin-bottom: 10rpx;
  border: 1px solid #ddd;
  padding: 10px;
  background-color: #ffffff; /* 背景色 */  
  border-radius: 10rpx; /* 边框圆角 */  
}

.drug-info {
  display: flex;
  flex-direction: column;
}

.name-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.name {
  font-weight: bold;
  color: #000000;
  font-size: 32rpx;
}

.price {
  font-weight: bold;
  color: #ffaa00;
  font-size: 32rpx;
}
.sort-and-city-container {  
  display: flex;  
  flex-direction: row;  
  align-items: center; 
  font-size:30rpx;
  color: #98a6af;
  margin-top: 10rpx;
}
.sort-and-city-container > :first-child {
  width: 80%; /* 第一个元素宽度为70% */
}

.sort-and-city-container > :last-child {
  width: 20%; /* 第二个元素宽度为30% */
}
  
.picker-group {  
  display: flex;  
  justify-content: space-between; /* 平均分配空间 */  
  width: 100%; /* 占据整行宽度 */  
  margin-bottom: 5rpx;
}  
  
.picker-wrapper {  
  /* 根据需要调整宽度，如果希望完全平均分配，则不需要设置 */  
  flex: 1; /* 如果你想让选择器按钮自动填充可用空间  */
}  
  
.picker-button {  
  /* 按钮样式，根据需要进行调整 */  
  width: 100%; /* 如果希望按钮占据整个包裹元素的宽度 */ 
  font-size: 35rpx;
}  
.store-name,
.product-name,
.specification,
.phone{
	font-size: 30rpx;
	color: #98a6af;
	margin-top: 10rpx;
}
.map-icon{
	width: 10px; /* 图标宽度 */
	height: 10px; /* 图标高度 */  
	margin-right: 10px; /* 图标与文本之间的间距 */  
}
.callPhone{
	text-decoration: none; 
	color: #98a6af;
}
</style>